Blocks: Add handling for block.json viewModule #57437

sirreal · 2023-12-28T20:11:03Z

What?

Add viewModule support for registering blocks from metadata.

To do:

Add viewModule field to REST API

Why?

As we introduce module support and the Interactivity API (only available as a module at this time), we should provide at least a similar experience to what we currently have with scripts.

How?

This follows a similar pattern to how WordPress Core manages block scripts. Different script handles are attached to the WP_Block_Type instance. Then those are enqueued when the block is rendered.

We use some filters to achieve the same result. I'd expect this functionality to move to Core when Modules support lands (WordPress/wordpress-develop#5818). See sirreal/wordpress-develop#2 for an example of what that might look like.

Testing Instructions

Add a block using block.json with a viewModule field pointing to its view module. I've compiled a block (with #57461) that's available at this gist. It can be unzipped as a plugin and used for testing.

We should be able to add our block in the editor. If we use the REST API to query block types and search for view_module_ids we should find our block:

(await wp.apiFetch( { path: '/wp/v2/block-types' }))
  .filter( ({ view_module_ids }) => view_module_ids.length )
  .map(blockType => ({
    name: blockType.name,
    view_module_ids: blockType.view_module_ids,
  }))[0]
// { "name": "jon/the-block", "view_module_ids": [ "jon-the-block-view-module" ] }

If the block is added to a post and we visit it on the frontend, we should see it working as expected (a counter in our example).

We should also see the expected modules added to the importmap and module preloads on our post with the block. I used an older theme to ensure nothing else was enqueuing the interactivity module:

document.querySelector('[type=importmap]');
// <script type="importmap">{"imports":{"@wordpress\/interactivity":"…"}}</script>
document.querySelector('#\\@wordpress\\/interactivity[rel=modulepreload]');
// <link rel="modulepreload" href="…" id="@wordpress/interactivity">

github-actions · 2023-12-28T20:12:18Z

This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress.

If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged.

If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack.

Thank you! ❤️

View changed files

❔ lib/experimental/modules/class-gutenberg-modules.php

This reverts commit 07fc04e64149c70606417ac288bffc648ca4816a.

github-actions · 2024-01-04T22:23:16Z

Flaky tests detected in 3fd6278.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7415313014
📝 Reported issues:

[Flaky Test] should display the correct preview when switching between published and draft statuses #37976 in /test/e2e/specs/editor/various/preview.spec.js

Squashed commit of the following: commit 3fd6278 Author: Jon Surrell <[email protected]> Date: Fri Dec 29 15:19:57 2023 +0100 Comment out useles i18n code commit 2fdf006 Author: Jon Surrell <[email protected]> Date: Fri Dec 29 15:19:44 2023 +0100 Fix lints commit 4f7d640 Author: Jon Surrell <[email protected]> Date: Fri Dec 29 15:19:31 2023 +0100 Reuse translation from core commit 6594c16 Author: Jon Surrell <[email protected]> Date: Thu Dec 28 21:13:43 2023 +0100 Fix lints commit 58c66d8 Author: Jon Surrell <[email protected]> Date: Thu Dec 28 21:10:22 2023 +0100 Use existing filter over new action This is really an action (side effect) but we don't need to add a new action if we use the filter commit 7bcb68a Author: Jon Surrell <[email protected]> Date: Thu Dec 28 20:59:05 2023 +0100 Working implementation with caveats

This reverts commit 34b5b44.

sirreal · 2024-01-09T16:04:56Z

I reverted the identifier change, we're back to ID 😄

sirreal · 2024-01-09T16:07:48Z

@luisherranz Any preference for how we handle the dev note? Are there other announcements around modules and Interactivity that go together?

luisherranz · 2024-01-09T16:19:41Z

I've never done a dev note so I have no idea 😄

But the Interactivity API and Modules API should be announced separately. It happens that the Interactivity API will use the Modules API, but they are conceptually separate things.

Support `viewScriptModule` block.json field for registering blocks from metadata. #57437 added `viewModule` support, but the Modules API changed in core to refer to "script modules." --- - `viewModule` is deprecated but supported. - `viewScriptModule` support is added. If both fields are present, `viewScriptModule` will be used. Two REST API fields are included for block types with the same information. `view_module_ids` (deprecated) and `view_script_module_ids`.

Syncing changes from the Gutenberg plugin: WordPress/gutenberg#57437. Scripts and styles can be registered for blocks via `block.json` metadata. There is now a Modules API, but was no way to register or associate module assets with blocks via `block.json`. Fixes #60233. Props jonsurrell, gziolo, cbravobernal, luisherranz, youknowriad. git-svn-id: https://develop.svn.wordpress.org/trunk@57565 602fd350-edb4-49c9-b593-d223f7449a82

Syncing changes from the Gutenberg plugin: WordPress/gutenberg#57437. Scripts and styles can be registered for blocks via `block.json` metadata. There is now a Modules API, but was no way to register or associate module assets with blocks via `block.json`. Fixes #60233. Props jonsurrell, gziolo, cbravobernal, luisherranz, youknowriad. Built from https://develop.svn.wordpress.org/trunk@57565 git-svn-id: http://core.svn.wordpress.org/trunk@57066 1a063a9b-81f0-0310-95a4-ce76da25c4cd

Syncing changes from the Gutenberg plugin: WordPress/gutenberg#57437. Scripts and styles can be registered for blocks via `block.json` metadata. There is now a Modules API, but was no way to register or associate module assets with blocks via `block.json`. Fixes #60233. Props jonsurrell, gziolo, cbravobernal, luisherranz, youknowriad. Built from https://develop.svn.wordpress.org/trunk@57565 git-svn-id: https://core.svn.wordpress.org/trunk@57066 1a063a9b-81f0-0310-95a4-ce76da25c4cd

sirreal force-pushed the js/add-view-module-handling branch from 37e636d to 56a3d3c Compare December 29, 2023 18:59

sirreal mentioned this pull request Dec 29, 2023

WP Scripts: Build block.json viewModule #57461

Merged

This was referenced Jan 2, 2024

Dependency Extraction Webpack Plugin: Add Module support #57199

Merged

Proposal: Support module metadata in block.json for Blocks + Modules API #57492

Closed

sirreal added a commit that referenced this pull request Jan 4, 2024

Squash merge #57437 for testing

5b6a58d

sirreal added a commit that referenced this pull request Jan 4, 2024

Revert "Squash merge #57437 for testing"

304e85e

This reverts commit 07fc04e64149c70606417ac288bffc648ca4816a.

sirreal force-pushed the js/add-view-module-handling branch from 56a3d3c to 3fd6278 Compare January 4, 2024 22:02

sirreal added 2 commits January 9, 2024 16:54

Lint fix

02994e9

Switch from id to identifier

34b5b44

sirreal force-pushed the js/add-view-module-handling branch from fc1fdf3 to 34b5b44 Compare January 9, 2024 15:54

sirreal added 2 commits January 9, 2024 16:55

Revert "Switch from id to identifier"

4cb4530

This reverts commit 34b5b44.

Fix lint

781b468

sirreal enabled auto-merge (squash) January 9, 2024 16:06

sirreal added the Needs Dev Note Requires a developer note for a major WordPress release cycle label Jan 9, 2024

sirreal merged commit 6a2fda1 into trunk Jan 9, 2024
56 checks passed

sirreal deleted the js/add-view-module-handling branch January 9, 2024 16:32

github-actions bot added this to the Gutenberg 17.5 milestone Jan 9, 2024

getdave added the Needs PHP backport Needs PHP backport to Core label Jan 15, 2024

getdave mentioned this pull request Jan 18, 2024

Plugin: Synchronize PHP changes for WordPress 6.5 release #57959

Closed

This was referenced Jan 24, 2024

Add viewScriptModule handling to block.json metadata WordPress/wordpress-develop#5860

Closed

Scripts: Add viewScriptModule block.json support #58203

Merged

gziolo mentioned this pull request Feb 2, 2024

block.json: Add viewStyle for frontend-only block styles #54491

Closed

sirreal mentioned this pull request Feb 6, 2024

Blocks: Add handling for block.json viewScriptModule #58731

Merged

youknowriad added Backported to WP Core Pull request that has been successfully merged into WP Core and removed Needs PHP backport Needs PHP backport to Core labels Feb 12, 2024

Leonardus-Nugraha mentioned this pull request Feb 18, 2024

6.5 Dev Note Tracking Issue #59155

Closed

32 tasks

gaambo mentioned this pull request Feb 23, 2024

Add pre 6.5 compat for viewStyles #59322

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Blocks: Add handling for block.json viewModule #57437

Blocks: Add handling for block.json viewModule #57437

sirreal commented Dec 28, 2023 •

edited

Loading

github-actions bot commented Dec 28, 2023

github-actions bot commented Jan 4, 2024

sirreal commented Jan 9, 2024

sirreal commented Jan 9, 2024

luisherranz commented Jan 9, 2024

Blocks: Add handling for block.json viewModule #57437

Blocks: Add handling for block.json viewModule #57437

Conversation

sirreal commented Dec 28, 2023 • edited Loading

What?

Why?

How?

Testing Instructions

github-actions bot commented Dec 28, 2023

github-actions bot commented Jan 4, 2024

sirreal commented Jan 9, 2024

sirreal commented Jan 9, 2024

luisherranz commented Jan 9, 2024

sirreal commented Dec 28, 2023 •

edited

Loading